<template>
  <view v-if="detail.data && detail.data.length">
    <!-- 竖向排列 row  -->
    <view
      class="x-goods-home-recommend"
      @click="onList"
    >
      <view class="_header">
        <view class="_block"></view>
        <view class="_block"></view>
        <view class="_title">你可能喜欢</view>
        <view class="_block"></view>
        <view class="_block"></view>
      </view>
      <view class="_goods-list">
        <view class="_item" v-for="(item,index) in list" :key="index" @click="onList(item)">
          <view class="_product-img">
            <x-image :src="formatOss(item.productMainPic)"/>
          </view>
          <view class="_product-title">
            {{ item.productTitle }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
export default {
  name: 'XGoodsHomeRecommend',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {};
  },
  computed: {
    list() {
      return this.detail.data.slice(0, 4);
    }
  },
  created() {
    const windowInfo = wx.getWindowInfo();
    this.$emit('mounted', (270 + 8) / (375 / windowInfo.windowWidth), this.detail);
    // this.setHeight();
  },
  methods: {
    numberFormat(val) {
      return this.$tools.numberFormat(val);
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 300);
    },
    onList() {
      uni.navigateTo({
        url: '/packages/activity/guess-like/index'
      });
    },
    onDetail(detail) {
      const query = this.$tools.object2param({
        productId: detail.productId,
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source
      });
      uni.navigateTo({
        url: `/pages/transit-product/index?${query}`
      });
    },
    setHeight() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.x-goods-home-recommend').boundingClientRect(data => {
          if (data) {
            this.$emit('mounted', data.height, this.detail);
          }
        }).exec();
      });
    }
  }
};
</script>

<style lang="scss">
.x-goods-home-recommend {
  box-sizing: border-box;
  width: 343px;
  height: 540px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #FFF2DA 0%, rgba(255, 252, 240, 0) 70.54%), #FFFFFF;;
  ._header{
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    ._title{
      font-size: 32px;
      font-weight: bold;
      color: #C96C38;
    }
    ._block{
      width: 12px;
      height: 12px;
      border-radius: 12px;
      background: linear-gradient(360deg, #FFB762 26.96%, rgba(255, 147, 45, 0) 100%);
      margin-right: 6px;
    }
    ._block:nth-child(2) {
      margin-right: 12px;
    }
    ._block:nth-child(4) {
      margin-left: 12px;
    }
  }
  ._goods-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 12px;
    ._item{
      width: 150px;
      margin-bottom: 20px;
      ._product-img{
        width: 150px;
        height: 150px;
        border-radius: 6px;
        overflow: hidden;
      }
      ._product-title{
        margin-top: 12px;
        font-size: 26px;
        color: #C96C38;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }
}

</style>
